Setting the Number Styles of Ordered Lists
02-02-18 Course- CSS-Simple
The list-style-type property of HTML 5 allows you to set a number style, for example, decimal (1,2,3…), upper-roman (I,II,III….), or lower-roman (i, ii, iii…), for marking the list items of an ordered list. In case of nested ordered lists, you can use different types of number styles for the list items at different list levels.
Let’s do the following steps to set the number styles for the list items in two ordered lists:
<!DOCTYPE html>
<html>
<head>
<title>Setting an number styles of ordered lists</title>
<style type=”text/css”>
ol.decimal {list-style-type: decimal}
ol.roman {list-style-type: upper-roman}
</style>
</head>
<body>
<h2>Here is a list of students:</h2>
<ol class=”decimal”>
<li>Sumit Saxena
<li>Passed 10th in 1999</li>
<li>Passed 12th in 2001</li>
<li Passed BCA in 2004</li>
<li>Passed MCA in 2007</li>
</ol>
</li>
<li>Amitabh Kumar</li>
<li>Rohit Jandial</li>
<li>Jitendra Arya</li>
<li>Avantika Srivastava</li>
<li>Sanchita Sarkar</li>
</ol>
</body>
</html>
Save the document with the name NumberStyles.html and open on browser.